<template>
  <div class="database_content">
    <el-row>
      <el-col :span="12">
        <RouterLink to="/database/nutrientElements">
          <div class="database_item" :style="`background-image: url(${kuang});`">元素</div>
        </RouterLink>
      </el-col>
      <el-col :span="12">
        <RouterLink to="/database/questions">
          <div class="database_item" :style="`background-image: url(${books});`">题库</div>
        </RouterLink>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <RouterLink to="/database/foodlist">
          <div class="database_item" :style="`background-image: url(${food});`">食物</div>
        </RouterLink>
      </el-col>
      <el-col :span="12">
        <RouterLink to="/database/cookbooklist">
          <div class="database_item" :style="`background-image: url(${shipu});`">食谱</div>
        </RouterLink>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <RouterLink to="/database/count">
          <div class="database_item" :style="`background-image: url(${compute});`">计算</div>
        </RouterLink>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import kuang from '../../assets/kuang.jpeg'
import books from '../../assets/books.jpeg'
import food from '../../assets/food.jpg'
import shipu from '../../assets/mian_bark.jpeg'
import compute from '../../assets/compute.jpeg'

</script>
<style lang="scss" scoped>
.database_content {
  height: calc(100vh - 60px);
  background-image: url('@/assets/menu_back.jpg');
  opacity: 0.8;
  
  a {
    text-decoration: none;
    color: #2c3e50;
  }
  .database_item {
    width: 82%;
    height: 120px;
    margin: 20px;
    text-align: center;
    border: 1px solid gray;
    border-radius: 10px;
    color: white;
    font-size: 30px;
    line-height: 160px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
}
</style>